<template>
	<div class="ly-sidebar h-full flex relative" ref="ly-sidebar" v-show="!isFold">
		<!-- 控制栏 -->
		<div
			class="control-bar w-16 duration-300 bg-[#F8F8F8] dark:bg-gray-800 h-full border-r border-blue-100 dark:border-gray-700">
			<!-- 上 -->
			<div class="up w-full py-2 flex flex-col items-center">
				<!-- 头像 -->
				<div
					@click="router.push('/')"
					class="avatar w-11 h-11 my-2 rounded-full overflow-hidden cursor-pointer"
					title="头像">
					<img class="w-full h-full" :src="settingStore.settingConfig.avatar" alt="avatar" />
				</div>
				<!-- 控制项 -->
				<div
					@click="createNote"
					class="control-item w-9 h-9 rounded-full border border-blue-500 cursor-pointer overflow-hidden"
					title="新建笔记">
					<div
						class="w-full h-full flex duration-300 items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white">
						<i class="bi bi-plus-lg text-base"></i>
					</div>
				</div>
				<div
					@click="searchDialogVisible = true"
					class="control-item w-8 h-8 rounded-full border border-blue-200 dark:border-gray-700 cursor-pointer overflow-hidden"
					title="搜索笔记">
					<div
						class="w-full h-full flex duration-300 items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white">
						<i class="bi bi-search text-sm"></i>
					</div>
				</div>
				<div
					@click="handleExportAllNotes"
					class="control-item w-8 h-8 rounded-full border border-blue-200 dark:border-gray-700 cursor-pointer overflow-hidden"
					title="导出所有笔记">
					<div
						class="w-full h-full flex duration-300 items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white">
						<i class="bi bi-box-arrow-in-up-right text-sm"></i>
					</div>
				</div>
			</div>
			<!-- 下 -->
			<div
				@click="router.push('/setting')"
				class="down w-full border-t border-blue-100 dark:border-gray-700 flex items-center justify-center">
				<i class="bi bi-gear-fill text-blue-500 text-lg cursor-pointer" title="设置"></i>
			</div>
		</div>
		<!-- 笔记列表 -->
		<div class="list w-80 border-r border-gray-100 dark:border-gray-700">
			<div
				class="title w-full h-12 flex items-center px-3 border-b border-gray-100 dark:border-gray-700">
				<div class="flex-1">
					<h1 class="text-lg text-blue-500">笔记列表</h1>
				</div>
				<div class="flex-1 flex justify-end">
					<span class="text-xs text-gray-500">共{{ noteList.length }}条笔记</span>
				</div>
			</div>
			<ul class="list-container w-full overflow-y-scroll p-2">
				<ly-note-item v-for="note in noteList" :note="note" :key="note.id" />
			</ul>
		</div>
		<ly-dialog title="搜索" v-model="searchDialogVisible">
			<!-- 搜索笔记 -->
			<div class="search-container w-full flex flex-col items-center">
				<div class="search-input h-10 w-full">
					<ly-input
						placeholder="输入笔记标题或内容关键字搜索"
						:height="30"
						:font-size="14"
						v-model="keyword" />
				</div>
				<!-- 搜索结果列表 -->
				<div class="search-result-list w-full">
					<ly-note-item
						:note="note"
						:key="note.id"
						v-for="note in searchResultList"
						@on-click="searchDialogVisible = false" />
				</div>
			</div>
		</ly-dialog>
	</div>
</template>

<script lang="ts">
import tip from '@/utils/util.tip';
import { saveAs } from 'file-saver';
import type { Note, NoteList } from '@/types';
import { useNoteStore } from '@/stores/noteStore';
import LyDialog from '@/components/LyDialog/index.vue';
import { useSettingStore } from '@/stores/settingStore';
import LyNoteItem from '@/components/LyNoteItem/index.vue';

export default defineComponent({
	name: 'LySidebar',
	components: { LyNoteItem, LyDialog },
	props: {
		isFold: {
			type: Boolean,
			default: false,
		},
	},
	setup() {
		const router = useRouter();
		const noteStore = useNoteStore();
		const settingStore = useSettingStore();

		// 创建笔记
		const createNote = (): void => {
			router.push('/');
			noteStore.activeNote = {
				id: '',
				title: '',
				content: '',
				createTime: '',
				updateTime: '',
			};
			noteStore.editorStatus = 'create';
		};

		// 笔记列表
		const noteList = computed<NoteList>(() => {
			return noteStore.noteList;
		});

		// 导出所有笔记
		const handleExportAllNotes = (): void => {
			if (noteStore.noteList.length < 1) {
				tip.warning('没有笔记可以导出');
				return;
			}
			noteStore.noteList.forEach((note: Note) => {
				const content = note.content;
				const blob = new Blob([content], { type: 'text/markdown' });
				saveAs(blob, `${note.title}-${note.id}.md`);
			});
		};

		// 搜索笔记
		const searchDialogVisible = ref<boolean>(false);
		watch(searchDialogVisible, () => {
			keyword.value = '';
		});
		const keyword = ref<string>('');
		const searchResultList = computed<NoteList>(() => {
			if (keyword.value.trim().length < 1) {
				return [];
			}
			return noteList.value.filter((note: Note) => {
				return (
					note.title.includes(keyword.value.trim()) || note.content.includes(keyword.value.trim())
				);
			});
		});

		return {
			router,
			keyword,
			noteList,
			settingStore,
			searchResultList,
			searchDialogVisible,
			createNote,
			handleExportAllNotes,
		};
	},
});
</script>

<style lang="scss" scoped>
// 上
.up {
	height: calc(100% - 54px);

	// 控制项
	.control-item {
		margin: 10px 0;
	}
}

// 下
.down {
	height: 54px;
}

// 笔记列表
.list {
	.list-container {
		height: calc(100% - 48px);

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-thumb {
			cursor: pointer;
			border-radius: 5px;
		}

		&:hover {
			&::-webkit-scrollbar-thumb {
				background-color: #838d9c83;
			}
		}
	}
}

// 搜索笔记
.search-container {
	.search-result-list {
		max-height: 500px;
		overflow-y: scroll;

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-thumb {
			cursor: pointer;
			border-radius: 5px;
			background-color: rgba(10, 10, 255, 0.5);
		}
	}
}
</style>
